<template>
  <h3>图书添加</h3>
  <el-divider />
  <el-form :model="book" label-width="auto">
    <el-form-item label="图书名称">
      <el-input v-model="book.bname" />
    </el-form-item>
    <el-form-item label="图书类别">
      <el-select v-model="book.categoryId" placeholder="请选择类别">
        <el-option
          v-for="category in categoryList"
          :label="category.cname"
          :value="category.categoryId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="作者">
      <el-input v-model="book.author" />
    </el-form-item>
    <el-form-item label="出版社">
      <el-input v-model="book.publisher" />
    </el-form-item>

    <el-form-item label="出版日期">
      <el-date-picker
        v-model="book.pubdate"
        style="width: 100%"
        type="date"
        placeholder="出版日期"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item label="库存数量">
      <el-input v-model="book.bookNum" />
    </el-form-item>
    <el-form-item label="单价">
      <el-input v-model="book.price" />
    </el-form-item>
    <el-form-item label="ISBN">
      <el-input v-model="book.isbn" />
    </el-form-item>

    <el-form-item label="图书封面">
      <el-upload
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :limit="1"
        :http-request="img_upload"
        :on-remove="handleRemove"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form-item>

    <el-form-item label="图书简介">
      <!-- <el-input type="textarea" v-model="book.bookDesc" /> -->
      <Editor v-model="book.bookDesc" :init="tinymceInit" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="btn_ok">确定</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import http from "../axios";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

//import Editor from "@tinymce/tinymce-vue";
// import 'tinymce/modules/editor/editor';
import tinymce from "tinymce/tinymce";
import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue"; // 引入组件
//引入工具栏图标和主题
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
// 引入富文本编辑器主题的js和css，不然显示出错
import "tinymce/themes/silver/theme.min";
import "tinymce/skins/ui/oxide/skin.min.css";

// 都是富文本插件
import "tinymce/icons/default";
import "tinymce/plugins/image";
// import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/autosave"; //自动保存
import "tinymce/plugins/save"; //保存

const tinymceInit = {
  selector: "#tinymce",
  width: "100%",
  height: 300,
  plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table paste code help wordcount",
  ],
  toolbar:
    "undo redo | formatselect | " +
    "bold italic backcolor | alignleft aligncenter " +
    "alignright alignjustify | bullist numlist outdent indent | " +
    "removeformat | help",

  resize: false, //是否可自主拉伸
  promotion: false, //Upgrade是否开启
  statusbar: false, //状态栏是否显示
  content_style: "body{margin:0;outline:none;font-family:'微软雅黑';};",
  language_url: "/langs/zh_CN.js", // 引入语言包（该语言包在public下，注意文件名称）
  language: "zh_CN", // 这里名称根据 zh-Hans.js 里面写的名称而定
  skin_url: "/skins/ui/oxide", // 这里引入的样式
  content_css:'/tinymce/skins/content/default/content.css',
  plugins: "lists image code table wordcount   autosave save", // 富文本插件
  //branding: false, //是否禁用“Powered by TinyMCE”
  menubar: true, //顶部菜单栏显示
  font_size_formats: "11pt 12pt 14pt 16pt 18pt 24pt 36pt",
  font_family_formats:
    "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;",
};
const book = ref({});
const cover = ref();

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const categoryList = ref([]);

const router = useRouter();

onMounted(() => {
  http
    .get("/category/list", {
      params: {
        state: 0,
      },
    })
    .then((resp) => {
      console.log("category--", resp);
      categoryList.value = resp.data.data.list;
    });
});

const btn_ok = () => {
  console.log(book.value);
  http.post("/book/add", book.value).then((resp) => {
    console.log(resp);
    if (resp.data.code != "200") {
      ElMessage.error(resp.data.message);
      return;
    }
    ElMessage.success(resp.data.message);
    router.push("/home/book");
  });
};

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisible.value = true;
};

const img_upload = (uploadFile) => {
  console.log(uploadFile);
  console.log(cover.value);
  //文件上传
  http
    .post(
      "/book/upload",
      {
        cover: uploadFile.file,
      },
      {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }
    )
    .then((resp) => {
      console.log(resp);
      book.value.bcover = resp.data.message;
    });
};
</script>

<style>

</style>
